<template>
	<view class="orderlist">
		<view class="head">
			
		</view>
		<view class="body">
			<view class="orderexample" 
			v-for="(item,index) in orders">
			
				<view class="exampleup">
					
					<view class="store" @click="gomct(item)">
						<image :src="item.srcs" class="storeava"></image>
						<view class="storename">
							{{item.sellerName}}专卖店
						</view>
					</view>
					<view class="ordernum">
						<!-- 订单编号: -->
							<text>订单编号：{{item.id}}</text>
					</view>
				</view>
				<view class="examplemid" @click="godetail(item)">
					<view class="commodityposter">
						<image :src="item.productImg" class="poster"></image>
					</view>
					<view class="orderdetail">
						<u--text :lines="2" :text="item.productName"></u--text>
						<view class="numandprice">
							<u--text mode="price" :text="item.price" bold="true" size="20" color="red"></u--text>
							 
						</view>
					</view>
				</view>
				<view class="exampledown" @click="godetail(item)">
					<view class="downcomp">
						下单时间:
						<text>{{item.time}}</text>
					</view>
					
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders:[],
			}
		},
		mounted(){
			uni.getStorage({
				key:"user",
				success:(res)=>{
					var openId=res.data.openId;
					console.log("本人openId:",openId);
					var _this=this;
					this.$axios(
					{
						method:'POST',
						url:'/getOrderList',
						params:{
							openId:openId,
						}
					}).then(
						res=>{
							console.log(res.data);
							for(var i=0;i<res.data.length;i++){
								const moment=require('moment')
								var tmp={}
								tmp['id']=res.data[i].order.id;
								tmp['srcs']=res.data[i].shop.headImg;
								tmp['productImg']=res.data[i].productionDetail.imgList[0];
								tmp['price']=res.data[i].productionDetail.price;
								tmp['productName']=res.data[i].productionDetail.productionName;
								tmp['time']=moment(res.data[i].order.updateTime).format('YYYY-MM-DD HH:mm:ss');
								tmp['sellerName']=res.data[i].shop.userName;
								tmp['address']=res.data[i].order.address.address;
								tmp['email']=res.data[i].shop.email;
								tmp['openId']=res.data[i].order.userId;
								this.orders.push(tmp);
								console.log(tmp);
							}
								
								
							
						}
					).catch(
						err=>{
							console.log(err);
						}
					)
				},
			})
			
		},
		methods: {
			gomct(itemm){
				var item={}
				item.srcs=itemm.srcs,
				item.name=itemm.sellerName,
				item.email=itemm.email,
				item.openId=itemm.openId
				uni.navigateTo({
					url:'../merchant/merchant?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			godetail(item){
				uni.navigateTo({
					url:'./orderdetail?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.orderlist{
	font-family:"Hiragino Sans GB","PingFang SC";
	.head{
		height: 50upx;
	}
	.orderexample{
		height: 360upx;
		width: 90%;
		margin-left: 5%;
		background-color: #eeeeef;
		margin-top: 20upx;
		border-radius: 10upx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border: solid 1upx #c8c8c8;
		margin-bottom: 30upx;
		padding-bottom: 20upx;
		.exampleup{
			height: 25%;
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #ffffff;
			.store{
				margin-left: 10upx;
				width: 50%;
				// background-color: #0f3b28;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.storename{
					
					font-size: 30upx;
					margin-top: 6upx;
					margin-left: 10upx;
				}
				.storeava{
					margin-top: 10upx;
					width: 60upx;
					height: 60upx;
					margin-left: 20upx;
					border-radius: 8upx;
					border: 1upx solid lightgray;
				}
			}
			.ordernum{
				width: 60%;
				display: flex;
				align-items: center;
				font-size: 30upx;
				margin-left: 10upx;
			}
		}
		.examplemid{
			height: 65%;
			width: 90%;
			margin-left: 5%;
			// background-color: #3B3532;
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
			
			.orderdetail{
				height: 84%;
				width: 60%;
				margin-top: 3%;
				// background-color: #7942ef;
				margin-left: 5%;
				
				
				.numandprice{
					margin-top: 10%;
					width: 80%;
					display: flex;
					align-items:center;
				}
			}
			.commodityposter{
				margin-top: 16upx;
			}
			.poster{
				width: 200upx;
				height: 200upx;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
				border: solid 1upx #c8c8c8;
				border-radius: 8upx;
			}
		}
		.exampledown{
			border-top: 1upx solid #ffffff;
			height: 10%;
			width: 100%;
			font-size: 25upx;
			overflow: hidden;
			.downcomp{
				margin-top: 10upx;
				margin-left: 30upx;
			}
		}
	}
}
</style>
